<template>
  <view class="tips">
    <view class="tips-title">
      {{tipItem.title?tipItem.title:'美食小贴士'}}
    </view>
    <view class="tips-header">
      <view class="tips-header-logo">
        <image src="../../../static/xiaoming.jpg" mode="aspectFill" />
      </view>
      <view class="tips-header-content">
        <view class="tips-header-content-title">
          知识渊博的小明同学
        </view>
        <view class="tips-header-content-info">
          <text>{{tipItem.modifyTime?tipItem.modifyTime:'0000-00-00 00:00:00'}}</text>
        </view>
      </view>
    </view>
    <view class="tips-content">
      <rich-text :nodes="tipItem.content"></rich-text>
    </view>
  </view>
</template>

<script>
// import DetailBottom from '@/components/DetailBottom';
import {getTipDetail} from '../../../api/tips';
export default {
  name: 'tipsDetail',
  components: {
    // DetailBottom
  },
  onLoad: function (options) {
    console.log(options)
		this.id = options.id
  },
  data () {
    return {
      id: 0,
      tipItem : {}
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      const data = {
        id: this.id
      }
      getTipDetail(data).then(res => {
        console.log(res)
        if (res.code !== 200) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        } else {
          this.tipItem = res.data
          // 完美解决富文本图片过大的问题
          this.tipItem.content = this.tipItem.content.replace(/<img/g,"<img style='width:100%'")
        }
      })
    }
  }
}
</script>

<style lang='scss'>
.tips {
  padding: 15px 0;
  padding-bottom: 54px;
  .tips-title {
    padding: 0 15px;
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  .tips-header {
    display: flex;
    align-items: center;
    margin-top: 10px;
    padding: 0 15px;
    .tips-header-logo {
      width: 40px;
      flex-shrink: 0;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      image {
        height: 100%;
        width: 100%;
      }
    }
    .tips-header-content {
      width: 100%;
      padding-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;
      .tips-header-content-title {
        font-size: 14px;
        color: #333;
      }
      .tips-header-content-info{
        color: #999;
        margin-right: 10px;
      }
    }
  }
  .tips-content {
    margin: 10px;
    // height: 1000px;
    // border: 1px solid $theme-color;
  }
}
</style>
